import { Card, Col, Row } from "antd"
import { Line } from '@ant-design/plots';
import { useEffect, useState } from "react";

const App = ()=>{
    const [data, setData] = useState([]);

    useEffect(() => {
      asyncFetch();
    }, []);
  
    const asyncFetch = () => {
      fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
        .then((response) => response.json())
        .then((json) => setData(json))
        .catch((error) => {
          console.log('fetch data failed', error);
        });
    };
    const config = {
      data,
      padding: 'auto',
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        // type: 'timeCat',
        tickCount: 5,
      },
    };
return <Card title={<div>当前在线55 秒之后更新数据</div>}>
    <Row>
        <Col flex='300px'>
              <div>2023/01/17 20:33:14</div>
              <h2>222.22</h2>
              <div>在线访客数</div>
        </Col>
        <Col flex='auto'>
          <div>最近30分钟访问情况</div>
          <div>
          {/* @ts-ignore */}
          <Line {...config} />
          </div>
        </Col>
    </Row>
</Card>
}
export default App